﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<#--<link href="https://cdn.bootcss.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">-->
    <link rel="stylesheet" href="../static/css/pagination.css">
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/reset.css">
    <link rel="stylesheet" href="../static/css/dev.css">
    <link rel="stylesheet" href="../static/css/client.css">
    <title>容智车联车厢管家</title>
</head>
<body>
<div class="container-fluid pos-re">
    <!--右边内容区-->
    <div class="row-fluid bg-white  pad-10 bdbox height100 yaxh">
        <div class="p-b-10 ov-h">
            <form class="navbar-search pull-left" method="post" action="../facility/choose">
                <input type="text" class="search-query" placeholder="输入搜索信息" name="word" value="${word}"/>
                <button class="search-lence" type="Submit"></button>
            </form>
            <div class="pull-right offset4">
                <button class="btn bg-color" id="add_info">增加</button>
                <button class="btn bg-color" id="import_btn" data-toggle="modal" data-target="#myModal2">导入表格</button>
                <a class="btn bg-color" data-toggle="modal"  href="../facility/exout?word=${word}" download="facility.xls">导出</a>
            </div>
        </div>
        <!--以上是搜索框，增加按钮组-->
        <!--以下是内容表格区-->
        <table class="table cl-b table-btn">
            <thead class="four-border">
            <tr>
                <th width="6%">序号</th>
                <th width="8%">设备ID</th>
                <th width="10%">硬件版本</th>
                <th width="10%">软件版本</th>
                <th width="10%">SIM卡号</th>
                <th width="10%">关联车牌号</th>
                <th width="10%">RFID卡号</th>
                <th width="14%">行车本照片</th>
                <th width="8%">备注</th>
                <th width="14%">操作</th>
            </tr>
            </thead>
            <tbody class="m-t-10 t-c" id="f-table">
            <#list AllFacility as fa>
            <tr class="${fa.id}">
                <td class="t-c port-num1" title="${fa.facilityNumber!""}">${fa_index+1+((currentPage-1)*size)}</td>
                <td class="t-c port-num" title="${fa.facilityNumber!""}">${fa.facilityNumber!""}</td>
                <td class="port-name" title="${fa.hedition!""}">${fa.hedition!""}</td>
                <td class="port-owner" title="${fa.sedition!""}">${fa.sedition!""}</td>
                <td class="port-simNumber" title="${fa.simNumber!""}">${fa.simNumber}</td>
                <td class="port-coords" title="${fa.simBrand!""}" style="display:none">${fa.simBrand!""}</td>
                <td class="port-card" title="${fa.carNumber!""}">${fa.carNumber!""}</td>
                <td class="port-carnum" title="${fa.rfidNumber!""}">${fa.rfidNumber!""}</td>
                <td class="port-check" id="${fa.cardUrl!""}"><a href="${fa.cardUrl!""}" target="blank">查看</a></td>
                <td class="port-note" title="${fa.remake!""}">${fa.remake!""}</td>
                <td>
                    <button class="btn bg-color rewrite">修改</button>
                    <button class="btn bg-color2" data-toggle="modal" data-target="#myModal">删除</button>
                </td>
            </tr>

            </#list>


            </tbody>
        </table>
        <div class="M-box"></div>
        <!-- 分页 -->
        <div class="col-md-12 column">
            <ul class="pagination pull-right">
                <ul class="pagination">
                <#if currentPage lte 1>
                    <li class="disabled"><a href="#">上一页</a></li>
                <#elseif type == "1">
                    <li><a href="../facility/getFacilitys?page=${currentPage - 1}&size=${size}">上一页</a></li>
                <#elseif type == "2">
                    <li><a href="../facility/choose?page=${currentPage - 1}&size=${size}&word=${word}">上一页</a></li>
                </#if>
                <#if  maxSize gte 10>
                    <#if currentPage gte 6 && currentPage lte maxSize-4>
                        <#list currentPage-5.. currentPage+4 as index>
                            <#if currentPage == index>
                                <li class="disabled"><a href="#">${index}</a></li>
                            <#elseif type == "1">
                                <li><a href="../facility/getFacilitys?page=${index}&size=${size}">${index}</a></li>
                            <#elseif type == "2">
                                <li><a href="../facility/choose?page=${index}&size=${size}&word=${word}">${index}</a></li>
                            </#if>
                        </#list>
                        <li class="disabled"><a>...</a></li>
                    <#elseif currentPage lte 6>
                        <#list 1..10 as index>
                            <#if currentPage == index>
                                <li class="disabled"><a href="#">${index}</a></li>
                            <#elseif type == "1">
                                <li><a href="../facility/getFacilitys?page=${index}&size=${size}">${index}</a></li>
                            <#elseif type == "2">
                                <li><a href="../facility/choose?page=${index}&size=${size}&word=${word}">${index}</a></li>
                            </#if>
                        </#list>
                        <li class="disabled"><a>...</a></li>
                    <#elseif currentPage gte maxSize-4>
                        <#list maxSize-10.. maxSize as index>
                            <#if currentPage == index>
                                <li class="disabled"><a href="#">${index}</a></li>
                            <#elseif type == "1">
                                <li><a href="../facility/getFacilitys?page=${index}&size=${size}">${index}</a></li>
                            <#elseif type == "2">
                                <li><a href="../facility/choose?page=${index}&size=${size}&word=${word}">${index}</a></li>
                            </#if>
                        </#list>
                    <#elseif currentPage lte maxSize-4>
                        <#list currentPage-10.. maxSize as index>
                            <#if currentPage == index>
                                <li class="disabled"><a href="#">${index}</a></li>
                            <#elseif type == "1">
                                <li><a href="../facility/getFacilitys?page=${index}&size=${size}">${index}</a></li>
                            <#elseif type == "2">
                                <li><a href="../facility/choose?page=${index}&size=${size}&word=${word}">${index}</a></li>
                            </#if>
                        </#list>
                    <#else >
                        <#list currentPage.. 10 as index>
                            <#if currentPage == index>
                                <li class="disabled"><a href="#">${index}</a></li>
                            <#elseif type == "1">
                                <li><a href="../facility/getFacilitys?page=${index}&size=${size}">${index}</a></li>
                            <#elseif type == "2">
                                <li><a href="../facility/choose?page=${index}&size=${size}&word=${word}">${index}</a></li>
                            </#if>
                        </#list>
                        <li class="disabled"><a>...</a></li>
                    </#if>
                <#else >
                    <#list 1..maxSize as index>
                        <#if currentPage == index>
                            <li class="disabled"><a href="#">${index}</a></li>
                        <#elseif type == "1">
                            <li><a href="../facility/getFacilitys?page=${index}&size=${size}">${index}</a></li>
                        <#elseif type == "2">
                            <li><a href="../facility/choose?page=${index}&size=${size}&word=${word}">${index}</a></li>
                        </#if>
                    </#list>
                </#if>
                <#if currentPage gte maxSize>
                    <li class="disabled"><a href="#">下一页</a></li>
                <#elseif type == "1">
                    <li><a href="../facility/getFacilitys?page=${currentPage + 1}&size=${size}">下一页</a></li>
                <#elseif type == "2">
                    <li><a href="../facility/choose?page=${currentPage + 1}&size=${size}&word=${word}">下一页</a></a></li>
                </#if>
                </ul>
            </ul>
        </div>

        <!--以下是信息修改/新建信息弹出页面-->
        <div class="pos-ab wh-bfb pad-30 bdbox dis-no height100 yaxh" id="pop_info">
            <div class="container w-lim pad-10 ov-h bdbox">
                <div class="row-fluid p-bt-10 bot-dot">
                    <div class="span3 text-right offset1">设&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ID:</div>
                    <div class="span2">
                        <input type="text" placeholder="点击开始输入" class="num-input"/></div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 text-right offset1">硬&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;件&nbsp;&nbsp;&nbsp;&nbsp;版&nbsp;&nbsp;&nbsp;&nbsp;本:</div>
                    <div class="span2">
                        <input type="text" placeholder="点击开始输入" class="name-input"/>
                    </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 text-right offset1">软&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;件&nbsp;&nbsp;&nbsp;&nbsp;版&nbsp;&nbsp;&nbsp;&nbsp;本:</div>
                    <div class="span2">
                        <input type="text" placeholder="点击开始输入" class="owner-input"/>
                    </div>
                </div>
                <div class="row-fluid p-bt-10 bot-dot">
                    <div class="span3 text-right offset1">SIM&nbsp;&nbsp;&nbsp;&nbsp;卡&nbsp;&nbsp;&nbsp;品&nbsp;&nbsp;&nbsp;牌:</div>
                    <div class="span2">
                        <input type="text" placeholder="点击开始输入" class="coords-input"/>
                    </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 text-right offset1">SIM&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</div>
                    <div class="span2">
                        <input type="text" placeholder="点击开始输入" class="card-input"/>
                    </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot pos-re">
                    <div class="span3 text-right offset1">关&nbsp;&nbsp;联&nbsp;&nbsp;车&nbsp;&nbsp;牌&nbsp;&nbsp;&nbsp;号:
                    </div>
                    <div class="span2">
                        <input type="text" placeholder="点击开始输入" class="carnum-input" id="addcarp"/>
                        <span class="pos-ab btn-lj001" id="recheck-btn">修改/查看</span>
                    </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 text-right offset1">车辆行驶本照片:</div>
                    <div class="span8 p-b-10">
                        <form id="uploadForm" class="from-lj">

                            <div class="scimg  float-l width50">
                                <img id="ImgPr" width="120" height="120"/>
                            </div>
                            <div class="float-r width50">
                                <div class="float-l emit-pic  pos-re text-center  btn bg-color margin-b15">
                                    选择图片
                                    <!--<input type="file" class="carpic-input pos-ab cursor-p" name="fileName"/>-->

                                    <input class="carpic-input pos-ab cursor-p" type="file" id="up" name="fileName"/>
                                </div>
                                <div class="float-l emit-pic  pos-re text-center  btn bg-color">
                                    确认上传
                                    <input class="carpic-input pos-ab cursor-p" type="button" id=""
                                           onclick="doUpload()"/>
                                </div>
                            </div>


                        </form>
                    </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 text-right offset1">RFID&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</div>
                    <div class="span2">
                        <input type="text" placeholder="点击开始输入" class="RFID-input"/>
                    </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 text-right offset1">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注:</div>
                    <div class="span2">
                        <input type="text" placeholder="点击开始输入" class="note-input"/>
                    </div>
                </div>

            </div>


            <div class="w-lim2 pad-10 ov-h bdbox">
                <!--以下按钮组用于修改信息用-->
                <div class="row-fluid p-t-30 dis-no" id="txt_add">
                    <button class="btn span5 bg-color pull-left leftBtn" id="updateFacility">确定</button>

                    <button class="btn span5 bg-color2 pull-right rightBtn">返回</button>
                </div>
                <!--以下按钮组用于新建信息用-->
                <div class="row-fluid p-t-30 dis-no" id="new_add">
                    <button class="btn span5 bg-color pull-left leftBtn" id="addFacility">确定</button>
                    <button class="btn span5 bg-color2 pull-right rightBtn">返回</button>
                </div>
            </div>


        </div>
    </div>
</div>
</div>

<!-- 点击删除按钮时弹出的模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
     style="width:350px;margin-left:-175px">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-color">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <p class="modal-title text-center " id="myModalLabel">
                    提示消息
                </p>
            </div>
            <div class="modal-body text-center">
                即将删除该设备?
            </div>
            <div class="modal-footer text-center">
                <button type="button" class="btn bg-color span2" data-dismiss="modal">取消
                </button>
                <button type="button" class="btn bg-color2 span2" id="delete">
                    删除
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 导入表格的模态框（Modal） -->
<div class="modal fade dis-no" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true" style="width:360px;margin-left:-180px">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-color">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <p class="modal-title text-center " id="myModalLabel">
                    选择文件
                </p>
            </div>
        <#--<form id="uploadFormFile" class="from-lj" method="post" action="../facility/exoutIn" enctype="multipart/form-data">-->
            <form id="uploadFormFile" class="from-lj">
                <div class="modal-body text-center p-l-20">
                    <p class="text-left">导入的文件格式为excel表格</p>
                    <p class="text-left"> 请在导入前下载导入模板</p>
                    <div class="row m-t-10 text-left p-l-20">
                        <input type="text" class="m-t-10" placeholder="请输入文件名称" id="fileid"/>
                        <button class="btn btn-mini bg-color text-center pos-re ov-h">浏览<input type="file" class=" pos-ab" name="fileName" id="filePath"/>
                        </button>
                    </div>
                    <div class="row m-t-10 text-left p-l-20">
                        <a href="#" style="color:#00F;">点击下载导入模板</a>
                    </div>
                </div>
                <div class="modal-footer">
                <#--<button type="button" class="btn bg-color span4 " onclick="doUploadFile()">-->
                    <button class="btn bg-color span4 " onclick="uploadFacility()">
                        导入
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-------查看/修改的模态窗--------->
<div id="pop-bottom">
</div>

<!--以下是新建信息弹出页面-->
<div class="container ov-h bdbox bg-white p-b-20 pos-re new-count dis-no" id="new-count">
    <h3 class="text-center tit-top p-r-10 pos-re">添加所属场站</br>
        <button type="button" class="close fix-close p-t-10 p-l-10" data-dismiss="modal" aria-hidden="true">
            &times;
        </button>
        <div class="pos-re">
            <form class="navbar-search  m-l-62">
                <input type="text" class="search-query" placeholder="输入关键字"/>
                <span class="search-lence2"></span>
            </form>
        </div>
    </h3>
    <div class="row-fluid pad-10 bdbox">
        <ol class="span6 p-l-10 p-r-10 bdbox text-center" id="left-list">
            <dt class="p-b-10">已选（0项）</dt>
            <!-- <dd class="p-b-10"><input type="checkbox" checked/> 天津五河场站</dd>
             <dd class="p-b-10"><input type="checkbox"/> 天津五河场站</dd>
           <dd class="p-b-10"><input type="checkbox"/> 天津五河场站</dd>
           <dd class="p-b-10"><input type="checkbox"/> 天津五河场站</dd>
           <dd class="p-b-10"><input type="checkbox"/> 天津五河场站</dd> -->
        </ol>
        <ol class="span6  p-l-10 p-r-10 bdbox text-center" id="right-list">
            <dt class="p-b-10">待选（${AllCarSize!""}项）</dt>
        <#list AllCar as allcar>
            <dd class="p-b-10"><input type="checkbox"/> ${allcar.carNumber}</dd>
        </#list>
        </ol>
    </div>
    <div class="row-fluid p-t-10 p-l-48 p-l-20" id="new_add">
        <button class="btn span8 bg-color offset1">确认添加</button>
    </div>
</div>
<script src="../static/js/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#up").uploadPreview({Img: "ImgPr", Width: 120, Height: 120});
    });
    jQuery.fn.extend({
        uploadPreview: function (opts) {
            var _self = this,
                    _this = $(this);
            opts = jQuery.extend({
                Img: "ImgPr",
                Width: 100,
                Height: 100,
                ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
                Callback: function () {
                }
            }, opts || {});
            _self.getObjectURL = function (file) {
                var url = null;
                if (window.createObjectURL != undefined) {
                    url = window.createObjectURL(file)
                } else if (window.URL != undefined) {
                    url = window.URL.createObjectURL(file)
                } else if (window.webkitURL != undefined) {
                    url = window.webkitURL.createObjectURL(file)
                }
                return url
            };
            _this.change(function () {
                if (this.value) {
                    if (!RegExp("\.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
                        alert("选择文件错误,图片类型必须是" + opts.ImgType.join("，") + "中的一种");
                        this.value = "";
                        return false
                    }
                    if ($.browser.msie) {
                        try {
                            $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
                        } catch (e) {
                            var src = "";
                            var obj = $("#" + opts.Img);
                            var div = obj.parent("div")[0];
                            _self.select();
                            if (top != self) {
                                window.parent.document.body.focus()
                            } else {
                                _self.blur()
                            }
                            src = document.selection.createRange().text;
                            document.selection.empty();
                            obj.hide();
                            obj.parent("div").css({
                                'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
                                'width': opts.Width + 'px',
                                'height': opts.Height + 'px'
                            });
                            div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src
                        }
                    } else {
                        $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
                    }
                    opts.Callback()
                }
            })
        }
    });
</script>

<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/dev.js"></script>
<script src="../static/js/facility/facility.js"></script>
<script src="../static/js/jquery.pagination.js"></script>
<#--<script>-->
<#--$('.M-box').pagination({-->
<#--pageCount: 50,-->
<#--jump: true,-->
<#--coping: true,-->
<#--homePage: '首页',-->
<#--endPage: '末页',-->
<#--callback: function (api) {-->
<#--$('.now').text(api.getCurrent());-->
<#--}-->
<#--}, function (api) {-->
<#--$('.now').text(api.getCurrent());-->
<#--});-->

<#--</script>-->
<style>
    #recheck-btn {
        left: auto;
        top: 320px;
        right: 380px;
        color: rgb(0, 163, 68);
        font-weight: bold;
        cursor: pointer;
    }

    .tit-top {
        background: rgb(0, 163, 68);
        height: 100px;
        color: rgb(255, 255, 255);
    }

    #pop-bottom {
        background: rgba(51, 51, 51, 0.8);
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        display: none;
        position: absolute;
        z-index: 2;
    }

    .new-count {
        margin: -245px auto 0px -200px;
        border: 1px solid rgb(204, 204, 204);
        left: 50%;
        top: 50%;
        width: 400px;
        position: absolute;
        z-index: 3;
    }

    #new-count > div > ol {
        height: 250px;
        overflow-y: scroll;
    }
    .m-l-62 {
        margin-left: 80px;
    }

</style>
</body>
</html>
